<!--
 * @Author: 蔡霸霸
 * @Date: 2020-05-20 15:28:35
 * @LastEditors: 蔡霸霸
 * @LastEditTime: 2020-06-05 10:48:27
 * @FilePath: \Nuxt_music\components\Drawer\index.vue
-->
<!--  -->
<template>
  <div class="drawer">
    <a-drawer
      placement="right"
      :closable="false"
      :visible="drawerFlag"
      :get-container="false"
      width="426"
      @close="onClose"
    >
      <div class="main clearfix">
        <div class="btn_box ">
          <!-- 悬浮开关 -->
          <a-button
            title="打开音乐播放器"
            type="primary"
            icon="play-square"
            class="btn"
            @click="showDrawer"
          />
        </div>

        <div class="music_box fl">
          <div class="music_detail clearfix">
            <!-- 头像 -->
            <a-avatar
              class="fl"
              shape="square"
              :size="64"
              icon="user"
              :src="musicData.cover"
            />
            <div class="text fl">
              <!-- 歌名 -->
              <h6>{{ musicData.name ? musicData.name : '暂无' }}</h6>
              <!-- 歌手 -->
              <p>{{ musicData.artist ? musicData.artist : '暂无' }}</p>
            </div>
            <a-button type="primary" class="white" @click="nextMusic"
              >next&nbsp;&gt;
            </a-button>
          </div>
          <audio
            id="myAudio"
            :src="musicData.source"
            controls
            autoplay
            @ended="audioEnd"
          >
            请使用现代浏览器，如Chrome，360极速版等，IE浏览器是上个世纪的废弃物
          </audio>
        </div>

        <div class="music-list fl">
          <h3>音乐播放列表</h3>
          <ul v-if="musicList[0].name !== ''">
            <li
              v-for="(item, index) in musicList"
              :key="item.id"
              class="clearfix"
              @click="listPlay(item.id)"
            >
              <p class="fl">
                <span>{{ index + 1 }}. </span
                ><a href="javascript:;">{{ item.name }}</a>
              </p>
              <p v-if="index === 0" class="fr">&lt;===</p>
            </li>
          </ul>
          <p v-else>空</p>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      aud: null,
      musicData: {
        name: '',
        artist: '',
        cover: '',
        source: '',
        id: ''
      }
    }
  },
  computed: {
    musicList() {
      return this.$store.state.music_list
    },
    ...mapState(['drawerFlag'])
  },
  watch: {
    musicList(n, o) {
      this.switchMusic()
    },
    deep: true
  },
  methods: {
    async listPlay(id) {
      await this.$store.dispatch('listSwitch', id)
    },
    nextMusic() {
      if (this.musicData.name !== '' && this.musicList.length > 1) {
        this.$store.dispatch('delMusic', this.musicData.source)
      } else {
        this.$message.warning('歌单见底啦！快去添加几首吧')
      }
    },
    showDrawer() {
      this.$store.commit('Set_drawerFlag', !this.drawerFlag)
    },
    async audioEnd() {
      //* 音乐播放完毕回调
      if (this.musicList.length > 1) {
        await this.$store.dispatch('delMusic', this.musicData.source)
      } else {
        const audio = document.querySelector('#myAudio')
        audio.pause()
        this.$message.warning('歌单见底啦！快去添加几首吧')
      }
    },
    onClose() {
      this.$store.commit('Set_drawerFlag', false)
    },
    async switchMusic() {
      this.musicData = {}
      try {
        this.musicData = await this.musicList[0]
      } catch (e) {}
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer {
  .ant-drawer-body {
    position: relative;
    .main {
      max-width: 300px;
      margin: 0 auto;
      .btn_box {
        width: 50px;
        height: 50px;
        position: absolute;
        right: 450px;
        bottom: 0;
        .btn {
          color: #fff;
          position: fixed;
          margin-top: -60px;
        }
      }
      .music_detail {
        margin-bottom: 10px;
        padding-left: 10px;
        position: relative;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px;
        .text {
          margin-left: 10px;
          margin-right: 10px;
          h6 {
            font: 600 16px/28px 'weiruanyahei';
          }
          p {
            line-height: 34px;
          }
        }
        .ant-btn {
          padding: 0 10px;
          position: absolute;
          right: 10px;
          bottom: 10px;
        }
      }
      .music-list {
        width: 300px;
        border: 1px solid #ccc;
        padding: 0 20px;
        padding-top: 2px;
        max-height: 300px;
        overflow-y: auto;
        border-radius: 8px;
        margin-top: 10px;
        h3 {
          font-weight: 600;
          border-bottom: 1px solid #ccc;
          text-align: center;
        }
        li {
          max-width: 100%;
          overflow: hidden;
          line-height: 26px;
          border-bottom: 1px solid #eee;
        }
      }
    }
  }
}
</style>
